<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../css/kuaidi.css">
    <title>快递代取</title>
</head>

<body>
    <div id="kuaidi">
        <el-container>
            <el-header height="45px">快递代取</el-header>
            <el-main>
                <el-form ref="form" :model="form" label-width="100px" class="kuaidif" label-position="left">
                    <el-form-item label="姓名" required="true">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码" required="true">
                        <el-input v-model="form.tel" type="tel" suffix-icon="el-icon-phone-outline"></el-input>
                    </el-form-item>
                    <el-form-item label="快递点位置" required="true">
                        <el-cascader v-model="form.kfrom" :options="kfromoptions"></el-cascader>
                    </el-form-item>
                    <el-form-item label="取件码" required="true">
                        <el-input v-model="form.code" type="text" suffix-icon="el-icon-s-order"></el-input>
                    </el-form-item>
                    <el-form-item label="快递大小" required="true">
                        <el-select v-model="form.size" placeholder="请选择">
                            <el-option label="大号(杠铃大小)￥6" value="xxxl"></el-option>
                            <el-option label="中号(书大小)￥3" value="xxl"></el-option>
                            <el-option label="小号(鼠标大小)￥2" value="xl"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="收货地址" required="true">
                        <el-input v-model="form.kto" type="text" suffix-icon="el-icon-position"
                            placeholder="格式(南苑-4号楼-111)"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                    </el-form-item>
                </el-form>
                {{form}}
            </el-main>
        </el-container>
    </div>
</body>
<script>
    new Vue({
        el: "#kuaidi",
        data: {
            form: {
                name: "",
                tel: "",
                code: "",
                kfrom: "",
                kto: "",
                size: ""
            },
            kfromoptions: [
                {
                    value: '北苑',
                    label: '北苑',
                    children: [{
                        value: '食堂地下菜鸟驿站',
                        label: '食堂地下菜鸟驿站'
                    }, {
                        value: '蜜罐快递柜',
                        label: '蜜罐快递柜'
                    }, {
                        value: '蜜罐旁',
                        label: '蜜罐旁'
                    }]
                }, {
                    value: '南苑',
                    label: '南苑',
                    children: [{
                        value: '四号楼103室',
                        label: '四号楼103室'
                    }, {
                        value: '四号楼107-108',
                        label: '四号楼107-108'
                    }, {
                        value: '四号楼112',
                        label: '四号楼112'
                    }, {
                        value: "10号楼对面小黄屋",
                        label: "10号楼对面小黄屋"
                    }, {
                        value: "10号楼对面蜜罐",
                        label: "10号楼对面蜜罐"
                    }, {
                        value: "南苑西门",
                        label: "南苑西门"
                    }, {
                        value: "篮球场4号门对面菜鸟驿站",
                        label: "篮球场4号门对面菜鸟驿站"
                    }]
                }
            ]
        },
        methods: {
            onSubmit: function () {
                let cc=this.form.name+"电话号码："+this.form.tel+"。快递点在"+this.form.kfrom[0]+" "+this.form.kfrom[1]+"。取件码："+this.form.code+"。送到"+this.form.kto+"。快递大小为"+this.form.size
                console.log(cc);
            }
        }
    })
</script>

</html>